
import { FC } from 'react'
import { Outlet, Link, useLoaderData} from 'react-router-dom'
import { getContacts } from '../contacts'
const Root: FC = () => {
  console.log('start')
  // 使用Router中的loader数据使用useLoaderData获取即可
  // 获取loader中的数据(定义的接口数据)
  const contacts = useLoaderData() as ContactType[]
  console.log(contacts)
  // 渲染联系人信息的render函数
  const renderContacts = () => {
    if(!contacts.length){
      return <p>
        <i>No Contacts</i>
      </p>
    }
    return (
      <ul>
          {contacts.map((item) => (
             <li key={item.id}>
             {/* <a href={`/contacts/1`}>Your Name</a> */}
             <Link to={'/contacts/' + item.id}>
             {item.first || item.last ? <>{item.first} {item.last}</> : <i>No Name</i>}
             {item.favorite && <span>★</span>}
             </Link>
           </li>
          ))}  
          </ul>
    )
  }
  
  return (
    <>
      <div id="sidebar">
        <h1>React Router Contacts</h1>
        <div>
          <form id="search-form" role="search">
            <input id="q" aria-label="Search contacts" placeholder="Search" type="search" name="q" />
            <div id="search-spinner" aria-hidden hidden={true} />
            <div className="sr-only" aria-live="polite"></div>
          </form>
          {/* 新增联系人的form表单 */}
          <form method="post">
            <button type="submit">New</button>
          </form>
        </div>
        <nav>
          {renderContacts()}
        </nav>
      </div>
      <div id="detail">
        {/* 需要告诉父组件子组件到底放在哪里-> 这里需要用到react-router得占位符 */}
        <Outlet />
      </div>
    </>
  )
}
// 定义loader函数,供路由模块使用,必须有返回值,如果没有返回值,需要返回null
export const loader = async () => {
const contacts = await getContacts()
return contacts
}
export default Root